<template>
	<view>
		<!-- 分段器 实现头部标题导航栏 -->
		<view class="video_tab">
			<view class="video_tab_title">
				<view class="title_inner">
					<uni-segmented-control
							:current="current"
							:values="items.map(v => v.title)"
							@clickItem="onClickItem"
							style-type="text"
							active-color="#D13F76"></uni-segmented-control>
				</view>
				<view class="iconfont iconsearch"></view>
			</view>
			<view class="content">
				<view v-if="current<4"><video-main :urlobj="{url: items[current].url, params: items[current].params}"></video-main></view>
				<view v-if="current === 4">分类</view>
			</view>
		</view>

	</view>
</template>

<script>
import videoMain from "./video-main/index"
import videoCategory from "./video-category/index"
import { uniSegmentedControl } from "@dcloudio/uni-ui"
export default {
	data() {
		return {
			items: [
				{title: '推荐', url: 'http://157.122.54.189:9088/videoimg/v1/videowp/featured', params: {limit: 30, skip: 0, order: 'hot'} },
				{title: '娱乐', url: 'http://157.122.54.189:9088/videoimg/v1/videowp/category/59b25abbe7bce76bc834198a', params: {limit: 30, skip: 0, order: 'new'} },
				{title: '最新', url: 'http://157.122.54.189:9088/videoimg/v1/videowp/videowp', params: {limit: 30, skip: 0, order: 'new'} },
				{title: '热门', url: 'http://157.122.54.189:9088/videoimg/v1/videowp/videowp', params: {limit: 30, skip: 0, order: 'hot'} },
				{title: '分类', url: 'http://157.122.54.189:9088/videoimg/v1/videowp/category', params: {} }
			],
			// 开发显示的页面，0-3对应items[0-3]
			current: 0
		}
	},
	onLoad() {

	},
	methods: {
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
		}
	},
	components: {
		uniSegmentedControl,
		videoCategory,
		videoMain
	}
}
</script>

<style lang="scss" scoped>
.video_tab{
	.video_tab_title{
		position: relative; /* 绝对定位 */
		.title_inner{
			width: 60%;
			margin: 0 auto;
		}
		.iconsearch{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 5%;
		}
	}
	.video_tab_content{}
}

</style>
